<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.main{
				width: 500px;
				height: 500px;
				border: 1px solid black;
				background: orange;
			}
		</style>
	</head>
	<body>
		
		<div id="main">
			<p>段落1</p>
			<p>段落2</p>
			<p>段落3</p>
			<p class="pul">
				<ul class="ul">
					<li>NO.1</li>
					<li><span>NO.2</span></li>
					<li>No.3</li>
					<li>No.4</li>
					<li>No.5</li>
					<li>No.6</li>
					<li>No.7</li>
					<li>No.8</li>
					<li id="li9">No.9</li>
				</ul>
			</p>
		</div>
		
		<script type="text/javascript">
			//jQuery环境--》门
			$(function(){
				//设置main的的样式（宽 高  边框  背景色）
				$("#main").addClass("main");
				//设置段落1的背景颜色为红色
				$("#main").children(":first").css("background","red");
				
				//段落3的背景颜色为绿色
				$(".pul").prev().css("background","green");
				//设置段落2的字体大小为20px
				var lastp = $(".pul");
				lastp.prev().prev().css("font-size","20px");
				
				//设置第一个li的背景颜色为粉红色
			//	$(".ul li:eq(1)").css("background","pink");
				
				//隔行变色
				$(".ul li:even").css("background","pink");
				$(".ul li:odd").css("background","#FFFF00");
				
				
				//获取第二个li的文本内容
				//text只获取文本  html：可以连标签一起获取
				var li2 = $(".ul li:eq(1)").text();
				//alert(li2);
				
				//将js的DOM对象转换成jquery对象
				//js:innerHtml;
				//jQuery：html();
				
				var li9js = document.getElementById("li9");//js
				//alert(li9js.innerHTML);
				
				var li9jq = $("#li9");//jQuery
				//alert(li9jq.html());		
				
				//将js对象转换成jquery
				var jq = $(li9js);
				//alert(jq.html());
				
				//将jQuery对象转换js
				var jsq = jq[0];
				//alert(jsq.innerHTML);
				
				//将jQuery对象转换成js对象的第二种方式
				var jsq2 = jq.get(0);
				alert(jsq2.innerHTML);
				
			})
		</script>
	</body>
</html>
